<template>
    <div v-if="show" class="superscript-popup">
        <div class="superscript-bg"></div>
        <div class="superscript-wrap">
            <div class="superscript-head">编辑角标<a href="javascript:" class="iconfont icon-guanbi" @click="show = false"></a></div>
            <div class="superscript-content">
                <div v-for="(item, index) in superscripts">
                    <input class="c-form-control" placeholder="角标名称" type="text" maxlength="6" v-model="item.mark"/>
                    <select-group :select-list="faceValues"
                                  ref="faceValues"
                                  placeholder="请选择"
                                  text-key="productName"
                                  :key="selectKeys[index]"
                                  :init-value="{key: compareKey, value: item[compareKey]}"
                                  @select="selectProductSize(index, $event)"></select-group>
                    <button type="button" class="c-btn red sm" @click="$delete(selectKeys, index);$delete(superscripts, index);">删除</button>
                </div>
                <p v-if="superscripts.length==0" class="superscript-no-data">暂未添加角标</p>
            </div>
            <div class="superscript-btn-wrap">
                <button type="button" class="c-btn sm" @click="save">保存修改</button>
                <button type="button" class="c-btn sm blue" @click="add">新增</button>
                <button type="button" class="c-btn sm transprant" @click="show = false">取消</button>
            </div>
        </div>
    </div>
</template>

<script>
    import SelectGroup from '@/component/selectGroup.vue';
    import { mytips } from '@/module/tools';
    export default {
        name: 'superscriptPopup',
        data(){
            return {
                show: false,
                faceValues: [],
                superscripts: [],
                selectKeys: [],// 保证select-group组件的唯一性
            }
        },
        props: {
            compareKey: { type: String, default: 'productSize' }
        },
        watch:{
            faceValues(arr){
                arr.forEach(function (item, index) {
                    this.selectKeys.push(index);
                }.bind(this))
            }
        },
        methods: {
            selectProductSize(index, item){
                for(let i = 0; i < this.superscripts.length; i++){
                    if(this.superscripts[i][this.compareKey] == item[this.compareKey] && index != i){
                        mytips('不能选择重复的面值');
                        this.$refs.faceValues[index].clearSelect();
                        this.$set(this.superscripts[index], this.compareKey, null);
                        return false;
                    }
                }
                this.$set(this.superscripts[index], this.compareKey, item[this.compareKey]);
            },
            add(){
                if(this.faceValues.length <= this.superscripts.length){
                    mytips('增加的项目不能超出面值的数量');
                    return false;
                }
                let data = {mark: ''};
                data[this.compareKey] = null;
                this.superscripts.push(data);
                this.selectKeys.push(Date.parse(new Date())+''+Math.random());
            },
            save(){
                for(let i = 0; i < this.superscripts.length; i++){
                    if(!this.superscripts[i].mark){
                        mytips('角标名称不能为空');
                        return false;
                    }
                    if(!this.superscripts[i][this.compareKey]){
                        mytips('面值不能为空');
                        return false;
                    }
                }
                this.$emit('save', this.superscripts);
                this.show = false;
            },
        },
        components: {
            SelectGroup,
        },
    }
</script>

<style lang="scss">
    .superscript-popup{
        position: fixed;left: 0;right: 0;top: 0;bottom: 0;z-index: 19;
        .c-form-control{vertical-align: top;width: 85px;}
        .superscript-bg{position: absolute;left: 0;right: 0;top: 0;bottom: 0;z-index: -1;background: rgba(0,0,0,0.5);}
        .superscript-head{border-bottom: 1px solid #d8e3eb;line-height: 48px;padding: 0 24px;font-size: 18px;}
        .superscript-head a{float: right;font-size: 24px;line-height: 32px;width: 32px;text-align: center;margin-top: 8px;color: #666;}
        .superscript-wrap{position: absolute;left: 50%;top: 40%;width: 400px;margin-left: -200px;margin-top: -200px;background: #fff;border-radius: 4px;box-sizing: border-box;}
        .superscript-content{height: 400px;overflow-y: auto;padding: 10px 32px;}
        .superscript-btn-wrap{text-align: center;padding: 12px 0;border-top: 1px solid #d8e3eb;}
        .superscript-no-data{text-align: center;margin-top: 180px;}
    }
</style>
